<template>
  <div>
    <video ref="videoPlayer" class="video-js" style="width: 70%;"></video>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';
import { ref, onMounted } from 'vue'; // 从Vue Composition API导入ref和onMounted函数
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
export default {
  name: "f-video",
  props:{
    // 视频的guid
    videoguid:{
      type:String,
      default:''
    }
  },
  setup(props) {
    const videoPlayer = ref(null);
    const videourl = window.ip+`/API/GetFile/GetVideo?guid=${props.videoguid}`
    onMounted(() => {
      // 设置视频播放器的宽度等于弹框的宽度
      videoPlayer.value.style.width = "100%";
      videoPlayer.value.style.height = "100%";
      // 创建视频实例
      const player = videojs(videoPlayer.value, {
        autoplay: false, // 自动播放设置
        controls: true, // 是否显示控件
        sources: [
          {
            src: videourl, // 视频文件的URL
            type: 'video/mp4', // 视频类型
          },
        ],
      });
    });

    return { videoPlayer };
  }
}
</script>